<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/jiazai.css" />
		<style type="text/css">
			.hea-con {
				padding: 10px 20px;
			}
			
			.hea-con>span:first-of-type {
				font-size: 18px;
			}
			
			.hea-con>span:last-of-type {
				display: inline-block;
				width: 18px;
				height: 18px;
				opacity: 0;
			}
			
			#bottom {
				position: fixed;
				bottom: 30px;
				left: 0;
				right: 0;
				font-size: 15px;
				text-align: center;
				letter-spacing: 1px;
				color: #0C61FF;
			}
			
			#bottom>img {
				height: 30px;
			}
			
			.coins-log {
				margin: 15px 0;
			}
			
			.coins-log>img {
				width: 40px;
				height: 40px;
			}
			
			.qr-wrap {
				margin: 25px 0;
			}
			
			.address {
				padding: 15px 10px;
				border-radius: 5px;
				background: #f5f5f5;
				white-space: nowrap;
				overflow: auto;
			}
			
			.btn-wrap {
				margin: 25px 0;
			}
			
			.btn-wrap>button {
				padding: 14px 45px;
				background: #0c61ff;
				color: white;
				border: none;
				border-radius: 40px;
			}
			
			.notice {
				text-align: center;
			}
		</style>

	</head>

	<body style="background: white;">
		<div id="app">

			<!-- 加载中动画 -->
			<div id='jiazai-ani' v-if='jiazai'>
				<div class="arc"></div>
				<h1><span>LOADING</span></h1>
			</div>
			<!-- 加载中动画 -->

			<div id="hea-wrap">
				<div class="dis-spa hea-con">
					<img @tap="_close();" src="img/left.svg" style="width:18px;height: 18px;" />
					<span>BTC充币</span>
					<span>1</span>
				</div>
				<div style="padding: 0 20px;">
					<div class="dis-cen coins-log">
						<img src="img/coins.png" />
					</div>
					<div class="dis-cen qr-wrap">

					</div>
					<div class="address">
						<span v-text='address'>address</span>
					</div>
					<div class="dis-cen btn-wrap">
						<button @tap="_copy(address);_toast('复制成功');">复制链接</button>
					</div>
					<div class="notice">
						<p>提示：该地址仅支持BTC充币，请勿用于其他币种</p>
						<p>该地址在十分钟之内有效</p>
					</div>
				</div>
			</div>
			<div id="bottom" class="dis-cen">
				<img src="img/logo3.png" />
			</div>
		</div>
		<script src="js/comm.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var app = new Vue({
				el: '#app',
				data: {
					jiazai: false,
					address:'12132234564'
				},
				created: function() {
					this.jiazai = true;

				},
				mounted: function() {
					var This = this;
					this.$nextTick(function() {
						This.makeQr();
					});
				},
				methods: {
					//生成二维码
					makeQr: function() {
						var send = {
							coinsid: 1,
							address: '1233213212',
							amount: 2
						};
						jQuery('.qr-wrap').qrcode({
							render: "canvas", //也可以替换为table
							width: 150,
							height: 150,
							text: JSON.stringify(send)
						});
						this.jiazai = false;
					},
				}
			});
		</script>
	</body>

</html>